<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 互动赛事</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
         <div class="handle-box">
             <el-button type="success" icon="plus" class="handle-del mr10" @click="addBanner('1')">赛事</el-button>
             <el-button type="info" icon="plus" class="handle-del mr10" @click="addBanner('2')">互动</el-button>
             <el-button type="danger" icon="plus" class="handle-del mr10" @click="addBanner('3')">巡演</el-button>
        </div>

             <div class="handle-box">
            <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
            <el-select v-model="select_cate" placeholder="活动类型" class="handle-select mr10">
                <el-option label="全部分类" value="0"></el-option>
                <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item" :value="index"></el-option>
            </el-select>
           <el-date-picker type="date"   placeholder="选择日期"  v-model="a_publish_time"  style="width:300px;"></el-date-picker>
            <el-button type="primary" icon="search" @click="getData">搜索</el-button>
        </div>

        <el-table :data="bannerCenter" border style="width: 100%" ref="multipleTable"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column  label="封面图" width="120">
             <template scope="scope">
              <img :src="scope.row.owe_match_show_img" width="100%"/>
            </template>
            </el-table-column>
            <el-table-column prop="owe_match_name" label="标题">
             <template scope="scope">
              <a target="_blank" :href="scope.row.owe_match_link?scope.row.owe_match_link:'javascript:;'">{{scope.row.owe_match_name}}</a>
            </template>
            </el-table-column>

                 <el-table-column  prop="typename"   label="活动类型" width="200">   </el-table-column>

             <el-table-column  prop="owe_match_show_time"   label="活动时间" width="200"> 
           
            </el-table-column>
         
            <el-table-column label="操作" width="250" >
                <template scope="scope">
        
                    <el-button size="small"     @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"   @click="handleDelete(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>

      <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="all_page">
            </el-pagination>
        </div>
  





<el-dialog title="编辑互动信息" :visible.sync="setBannerInfo">
  <el-form label-width="100px">
    <el-form-item label="标题">
      <el-input type="input" placeholder="活动标题" v-model="matchInfo.owe_match_name" auto-complete="off"></el-input>
    </el-form-item>

    <el-form-item label="封面图:">
   <el-upload class="avatar-uploader" name='image' :action="uploadURI"  :show-file-list="false" :on-success="handleCoverSuccess">
   <img v-if="matchInfo.owe_match_show_img" :src="matchInfo.owe_match_show_img" class="avatar" style='width:100%'>
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    </el-form-item>
  <el-form-item label="活动时间">
        <el-date-picker type="datetime"   placeholder="选择日期"  v-model="matchInfo.owe_match_time"  style="width:300px;"></el-date-picker>
  </el-form-item>

    <el-form-item label="跳转地址">
     <el-input type="input" placeholder="跳转地址(可不填)" v-model="matchInfo.owe_match_link" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动类型">
             <el-select v-model="matchInfo.owe_match_type"  class="handle-select mr10">
                <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item" :value="index"></el-option>
            </el-select>
    </el-form-item>


  </el-form>
  <div slot="footer" class="dialog-footer">
     <el-button type="default" @click="closeEdit">关闭</el-button>
    <el-button type="danger" @click="saveBannerInfo">保存</el-button>
  </div>
</el-dialog>

 </div>
</template>

<script>
import * as rpConfig from "../../../rpConfig/constant";
import { HttpReq } from "../../service/server";
var Server = new HttpReq();
export default {
  data() {
    return {
      uploadURI: rpConfig.API_URI + "/Helpapi/uploadImg",
      matchInfo: {
        owe_match_id: 0,
        owe_match_name: "",
        owe_match_link: "",
        owe_match_img: "",
        owe_match_show_img: "",
        owe_match_time: "",
        owe_match_type: ""
      },
      cur_page: 1,
      all_page: 1,
      bannerCenter: [],
      typeCenter: [],
      setBannerInfo: false,
      dialogVisible: false,
      dialogImageUrl: "",
      select_cate: "",
      a_publish_time: "",
      multipleSelection: [],
      del_list: []
    };
  },
  created() {
    this.getData();
    this.getType();
  },
  computed: {},
  methods: {
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    handleCoverSuccess(res) {
      if (res.code != 200) {
        this.$message.error(res.msg);
      } else {
        this.matchInfo.owe_match_show_img = res.data.url;
        this.matchInfo.owe_match_img = res.data.saveUrl;
      }
    },

    getType() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/interactcenter.Societymatch/getTypeCenter",
        {},
        function(res) {
          self.typeCenter = res.data;
        }
      );
    },
    getData() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/interactcenter.Societymatch/getSociety",
        {
          a_type_id: self.select_cate,
          time: self.a_publish_time,
          page: self.cur_page
        },
        function(res) {
          self.bannerCenter = res.data.data;
          self.all_page = Math.ceil(res.data.num / res.data.pagesize) * 10;
        }
      );
    },

    closeEdit() {
      this.setBannerInfo = false;
    },

    saveBannerInfo() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/interactcenter.Societymatch/saveMatchInfo",
        self.matchInfo,
        function(response) {
          self.$message.success(response.msg);
          self.closeEdit();
          setTimeout(() => {
            self.getData();
          }, 2000);
        }
      );
    },

    handleEdit(row) {
      this.matchInfo.owe_match_id = row.owe_match_id;
      this.matchInfo.owe_match_name = row.owe_match_name;
      this.matchInfo.owe_match_link = row.owe_match_link;
      this.matchInfo.owe_match_show_img = row.owe_match_show_img;
      this.matchInfo.owe_match_img = row.owe_match_img;
      this.matchInfo.owe_match_time = rpConfig.getTime(row.owe_match_time,'S');
      this.matchInfo.owe_match_type = row.owe_match_type + "";
      this.setBannerInfo = true;
    },
    addBanner(type) {
      this.matchInfo.owe_match_id = 0;
      this.matchInfo.owe_match_name = "";
      this.matchInfo.owe_match_link = "";
      this.matchInfo.owe_match_show_img = "";
      this.matchInfo.owe_match_img = "";
      this.matchInfo.owe_match_time = "";
      this.matchInfo.owe_match_type = type;
      this.setBannerInfo = true;
    },
    handleDelete(row) {
      let self = this;
      self
          .$confirm("确认删除？")
          .then(_ => {
      Server._POST(
        rpConfig.API_URI + "/interactcenter.Societymatch/deleteMatchItem",
        { item_id: [row.owe_match_id] },
        function(response) {
          self.$message.success(response.msg);
          self.getData();
        }
      );
          }).catch(_ => {});
    },
    delAll() {
      const self = this,
        length = self.multipleSelection.length;
      let delArr = [];
      for (let i = 0; i < length; i++) {
        delArr.push(self.multipleSelection[i].owe_match_id);
      }
      if (delArr.length == 0) {
        self.$message.info("请选择要删除的记录");
      } else {
        self
          .$confirm("确认删除？")
          .then(_ => {
            Server._POST(
              rpConfig.API_URI + "/interactcenter.Societymatch/deleteMatchItem",
              { item_id: delArr },
              function(response) {
                self.$message.success(response.msg);
                self.getData();
              }
            );
          })
          .catch(_ => {});
      }

      self.multipleSelection = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.item {
  margin-bottom: 18px;
  cursor: pointer;
}
.item:hover {
  color: #44b549;
}
.curgroup {
  color: #44b549;
}
</style>